<!--  -->
<template>
  <div class="input-tel">
    <!-- 头部导航 -->
    <van-nav-bar
      title="手机号注册"
      left-arrow
      fixed
      :z-index="999"
      @click-left="onClickLeft"
    >
    </van-nav-bar>
    <!-- 内容 -->
    <div class="main-content">
      <div class="tel">
        <span>手机号: </span>
        <input  type="tel"  maxlength="11" placeholder="请输入11位手机号" v-model="telNumber" 
        @input="handleInput"/>
      </div>
      <div class="btn" :class="{disabled:!isVaild}" @click="next">下一步</div>
    </div>

  </div>
</template>

<script>
import { NavBar, Toast} from "vant";
import { canReg } from '@/network/login';
export default {
  data() {
    return {
      telNumber:'',
      isVaild:false
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods:{
    //返回上一页
    onClickLeft(){
      this.$router.go(-1);
    },
    //手机号输入完成
    handleInput(){
      //校验手机号规则
      let reg = /^1[3|5|7|8|9]\d{9}$/;
      this.isVaild = reg.test(this.telNumber)

    },
    //下一步
    async next(){
      if(this.isVaild){
        //去发送验证码页面
        //去之前,先去数据库查询有没有这个手机号,若已经有了,则不允许注册,反之就可以注册
        console.log(this.telNumber);
        try{
          const res = await canReg(this.telNumber)
          if(res.canReg){
            this.$router.push({name:'SendVerify',params:{telNumber:this.telNumber}});
          }else{
            Toast.fail(res.message)
            this.telNumber = '';
          }
        }catch(err){
          console.log(err);
          Toast.fail('请求异常')
        }
      }
    }
  },
  components: {
    [NavBar.name]: NavBar,
    [Toast.name]: Toast,
  },
};
</script>
<style scoped>
.input-tel {
  padding-top: 46px;
  padding-bottom: 56px;
  font-size: 16px;
}
/* 头部导航 */
.van-nav-bar {
  background-color: #ff6a00;
}
.input-tel >>> .van-nav-bar__title {
  color: #fff;
  font-size: 18px;
}
.input-tel >>> .van-nav-bar__arrow{
  font-size: 20px;
  color:#fff;
}
.main-content{
  padding:12px;
}
.main-content .tel{
  padding:10px 0;
  border-bottom:1px solid #ccc;
}
.main-content .tel span{
  margin-right:20px;
}
.main-content .btn{
  height:44px;
  color:#fff;
  text-align:center;
  line-height:44px;
  margin:14px 0;
  border-radius:20px;
  background-color: #5eb5f8;
}
.main-content .btn.disabled{
  background-color: #ccc;
}
</style>